<template>
    <div>
        <ArchiveCard :data="articleData" @reload="reload"/>
        <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                :page-size="pageSize"
                @current-change="changePage"
        >
        </el-pagination>
    </div>
</template>

<script>
    import ArchiveCard from "./ArchiveCard";
    export default {
        name: "Archive",
        data(){
            return{
                id: '', // 选择标签的id
                total: 0, // 数据量
                articleData: [],
                pageSize: 10, // 每页数据条数
                page: 1,
            }
        },
        methods:{
            async changePage(page){
                this.articleData = await this.$store.dispatch("article/listSimple", {uid:this.id,page:page,record:this.pageSize})
                this.page = page;
            },
            async reload() {
                // 修改总数据量
                this.total = await this.$store.dispatch("article/countTotal", {uid:this.id});
                let pageCount = Math.floor(this.total / this.pageSize);
                // 如果当前页码大于总数，修改当前页码为最大页数
                if (this.page > pageCount) {
                    this.page = pageCount;
                }
                // 获取当前页的数据
                this.changePage(this.page);
            }
        },
        async created() {
            // 设置用户id
            this.id = await this.$store.dispatch("user/getId")
            // 查询页数
            this.total = await this.$store.dispatch("article/countTotal", {uid:this.id});
            this.changePage(1);
        },
        components: {ArchiveCard}
    }
</script>

<style scoped>

</style>